<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目验收单模版</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            position: relative;
            background-color: #fff;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 30px;
        }
        .company-opinion {
            border: 1px solid;
            padding: 10px;
            margin-bottom: -1px;
        }
        .signature {
            text-align: right;
            margin-right: 100px;
        }
        .note {
            font-size: 14px;
            text-align: left;
            margin-top: 10px
        }
        .controls {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 100;
        }
        button {
            padding: 8px 15px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            min-width: 120px;
            color: white;
            font-weight: bold;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        button:active {
            transform: translateY(0);
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
        }
        @media print {
            .controls {
                display: none;
            }
        }
        input, textarea {
            width: 100%;
            border: none;
            font-family: inherit;
            padding: 0;
        }
        input:focus, textarea:focus {
            outline: 1px solid #0066cc;
        }
        .editable {
            min-height: 1em;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="window.print()">打印表格</button>
        <button onclick="addRow()">添加项目</button>
        <button onclick="removeLastRow()">删除一项</button>
    </div>

    <div class="title" contenteditable="true">项目验收表</div>
    
    <table>
        <tr>
            <td width="15%">项目名称</td>
            <td width="35%"><input type="text" id="projectName"></td>
            <td width="15%">项目编号</td>
            <td width="35%"><input type="text" id="projectNumber"></td>
        </tr>
        <tr>
            <td>服务单位</td>
            <td><input type="text" id="serviceUnit"></td>
            <td>验收地点</td>
            <td><input type="text" id="acceptanceLocation"></td>
        </tr>
    </table>
    
    <p contenteditable="true">验收内容：针对XX进行验收，具体情况如下</p>
    
    <table id="acceptanceItems">
        <thead>
            <tr>
                <th width="10%">序号</th>
                <th width="30%">验收项目</th>
                <th width="40%">验收内容</th>
                <th width="20%">验收结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td contenteditable="true">XX服务</td>
                <td contenteditable="true"></td>
                <td contenteditable="true">通过</td>
            </tr>
        </tbody>
    </table>
    
    <p contenteditable="true">验收结论：同意通过验收。</p>
    
    <div class="company-opinion">
        <p contenteditable="true">XX公司意见：</p>
        <div class="signature">
            <span contenteditable="true" style="margin-right: 100px;">（章）</span><br>
            <span contenteditable="true" style="margin-right: 100px;">代表签字：</span><br>
            <span contenteditable="true">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
        </div>
    </div>
    
    <div class="company-opinion">
        <p contenteditable="true">XX公司意见：</p>
        <div class="signature">
            <span contenteditable="true" style="margin-right: 100px;">（章）</span><br>
            <span contenteditable="true" style="margin-right: 100px;">代表签字：</span><br>
            <span contenteditable="true">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
        </div>
    </div>
    
    <div class="note">注：本表一式两份，双方各存一份。</div>

    <script>
        // 添加新行
        function addRow() {
            const table = document.getElementById('acceptanceItems').getElementsByTagName('tbody')[0];
            const rowCount = table.rows.length;
            const newRow = table.insertRow(rowCount);
            
            // 序号列
            const cell1 = newRow.insertCell(0);
            cell1.textContent = rowCount + 1;
            
            // 验收项目列
            const cell2 = newRow.insertCell(1);
            cell2.contentEditable = true;
            cell2.textContent = "XX服务";
            
            // 验收内容列
            const cell3 = newRow.insertCell(2);
            cell3.contentEditable = true;
            
            // 验收结果列
            const cell4 = newRow.insertCell(3);
            cell4.contentEditable = true;
            cell4.textContent = "通过";
        }
        
        // 删除最后一行
        function removeLastRow() {
            const table = document.getElementById('acceptanceItems').getElementsByTagName('tbody')[0];
            if (table.rows.length > 1) { // 确保至少保留一行
                table.deleteRow(table.rows.length - 1);
            }
            // 重新编号
            renumberRows();
        }
        
        // 重新编号所有行
        function renumberRows() {
            const table = document.getElementById('acceptanceItems').getElementsByTagName('tbody')[0];
            for (let i = 0; i < table.rows.length; i++) {
                table.rows[i].cells[0].textContent = i + 1;
            }
        }
    </script>
</body>
</html>